const productList = [
  { imgSrc: './assets/img/serverroom5.jpg', title: 'ICS Storefront' },
  { imgSrc: './assets/img/serverroom6.jpg', title: 'Data Tools' },
  { imgSrc: './assets/img/serverroom7.jpg', title: 'Alliance Escrow' },
  { imgSrc: './assets/img/serverroom8.jpg', title: 'Web & Graphic Design' },
  { imgSrc: './assets/img/serverroom5.jpg', title: 'ICS Storefront' },
  { imgSrc: './assets/img/serverroom6.jpg', title: 'Data Tools' },
  { imgSrc: './assets/img/serverroom7.jpg', title: 'Alliance Escrow' },
  { imgSrc: './assets/img/serverroom8.jpg', title: 'Web & Graphic Design' },
  { imgSrc: './assets/img/serverroom5.jpg', title: 'ICS Storefront' },
  { imgSrc: './assets/img/serverroom6.jpg', title: 'Data Tools' },
  { imgSrc: './assets/img/serverroom7.jpg', title: 'Alliance Escrow' },
  { imgSrc: './assets/img/serverroom8.jpg', title: 'Web & Graphic Design' }
];

window.onload = function () {
  scrollIntoViewTop('html');
  insertData(productList, '.itemList');
  goProductDetail();
};

// 监听滚动
window.onscroll = function () {
  const target = document.querySelector('.goTop');
  handleScroll() ? target.classList.add('isFixed') : target.classList.remove('isFixed');
};

// 页面滚动距离
function handleScroll() {
  const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
  return top > 10;
};

// 将目标元素置顶
function scrollIntoViewTop(target) {
  const targetElem = document.querySelector(target);
  targetElem.scrollIntoView({
    behavior: "smooth"
  });
};

// 插入数据
function insertData(arr, target) {
  var box = document.querySelector(target);
  var str = '';

  arr.forEach(item => {
    str += `
      <div class="item">
      <div class="productImg"><img src="${item.imgSrc}" alt=""></div>
      <div class="itemTitle">
      ${item.title}
      </div>
      </div>
      `;
  });
  box.innerHTML = str;
};


//点击跳转产品详情
function goProductDetail() {
  var box = document.querySelectorAll('.item');
  box.forEach((item) => {
    console.log('11');
    item.addEventListener('click', function () {
      window.location = 'http://127.0.0.1:11146/gzdk(1)/gzdk/product.html'
    })
  })
}




function showNav() {
  let showNav = document.getElementById('showNav');
  let nav = document.getElementById('nav');
  nav.style.display = 'block'
  showNav.style.display = 'none'
}

function showNav2() {
  let showNav = document.getElementById('showNav');
  let nav = document.getElementById('nav');
  nav.style.display = 'none'
  showNav.style.display = 'block'
}